<template>
  <div>
    <el-card>
      <el-form :model="form" ref="formRef" inline>
        <el-form-item label="">
          <el-select v-model="form.cycle" placeholder="排产周期">
            <el-option label="" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="form.cycle" placeholder="排产周别">
            <el-option label="" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="form.num" placeholder="合同号"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary">搜索</el-button>
          <el-button type="">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-row class="rows" :gutter="20" type="flex" justify="space-between">
      <el-col :span="4">
        <el-card>
          <h4>合同列表</h4>
          <div class="list">
            <div v-for="(item, index) in list" :key="index">
              <div
                class="item"
                :class="active == index ? 'active' : ''"
                @click="active = index"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="20">
        <el-card>
          <my-table :columns="columns" :data="data" class="tables">
            <template slot="table-title">
              <h4 class="table-title">
                <span>合同号：1</span>
                <span>齐套数：10000</span>
              </h4>
            </template>
            <template v-slot:name="{ row }">
              <el-select v-model="row.name" placeholder="请选择">
                <el-option label="" value=""></el-option>
              </el-select>
            </template>
            <template v-slot:num="{ row }">
              <el-input
                v-model="row.num"
                type="number"
                placeholder="请输入"
              ></el-input>
            </template>
            <template v-slot:materialUnit="{ row }">
              <el-select v-model="row.materialUnit" placeholder="请选择">
                <el-option label="" value=""></el-option>
              </el-select>
            </template>
            <template v-slot:bom="{ row }">
              <el-input
                v-model="row.bom"
                type="number"
                placeholder="请输入"
              ></el-input>
            </template>
            <template v-slot:unit="{ row }">
              <el-select v-model="row.unit" placeholder="请选择">
                <el-option label="" value=""></el-option>
              </el-select>
            </template>
            <template v-slot:action="{ row }">
              <el-button type="text">编辑</el-button>
              <el-button type="text" class="danger">删除</el-button>
            </template>
          </my-table>
          <el-button type="primary">添加物料</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import myTable from "@/components/table/myTable";
export default {
  components: { myTable },
  data() {
    return {
      form: {},
      list: [
        {
          name: "合同1",
        },
        {
          name: "合同2",
        },
        {
          name: "合同3",
        },
      ],
      active: "",
      columns: [
        {
          label: "物流名称",
          props: "name",
          slot: "name",
        },
        {
          label: "物流数量",
          props: "num",
          slot: "num",
        },
        {
          label: "物料单位",
          props: "materialUnit",
          slot: "materialUnit",
        },
        {
          label: "单位产品物料bom",
          props: "bom",
          slot: "bom",
        },
        {
          label: "单位",
          props: "unit",
          slot: "unit",
        },
        {
          label: "可供成品数",
          props: "supply",
        },
        {
          label: "操作",
          props: "action",
          slot: "action",
          minwidth: "200",
        },
      ],
      data: [],
    };
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
@import "@/styles/element-variables.scss";
.el-card {
  height: 100%;

  margin-bottom: 20px;
}
.list {
  padding: 20px auto;
  margin-bottom: 20px;
  .item {
    margin-bottom: 20px;
    padding-left: 30px;
    cursor: pointer;
  }
  .active {
    color: $--color-primary;
  }
}
.table-title {
  span {
    margin-right: 20px;
  }
}
.tables {
  margin: 20px 0;
}
.danger {
  color: $--color-danger;
}
.el-card__body {
  height: 100%;
}
</style>
